<template>
    <div id="app" style="height:100%;">

        <view-box :body-padding-bottom="0">
            <loading v-model="isLoading"></loading>

            <keep-alive>
                <router-view v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
            <router-view v-if="!$route.meta.keepAlive"></router-view>

            <!--<router-view></router-view>-->
        </view-box>

    </div>
</template>

<script>
    import { Loading, ViewBox } from 'vux'
    import { mapState } from 'vuex'

    export default {
        name: 'app',
        components: {
            Loading,
            ViewBox
        },
        computed: {
            ...mapState({
                isLoading: state => state.vux.isLoading
            })
        }
    }
</script>

<style lang="less">
    @import '~vux/src/styles/reset.less';
    @import '~vux/src/styles/close.less';
    @import '~vux/src/styles/1px.less';
    @import '~vux/src/styles/tap.less';

    body {
        background-color: #fbf9fe;
    }
    html, body {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
    }
</style>
